{extend name="$BASE_LIST" /}
{block name="body"}
<link rel="stylesheet" type="text/css" href="__STATIC__/monthPicker/dateRange.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/monthPicker/monthPicker.css"/>
<style type="text/css">
.frm_input_box{width: 225px!important}
</style>
<div class="right-main">
    <div class="page_nav" id="js_page_nav"><span class="page_title">{$page_nav}</span></div>
    <div id="js_main_header" class="ui-form main_header">
        <div class="left margin-right-5">
            <input style="width:200px" class="form-control" id="month_picker" size="20"/>
        </div>
        <span>
            <select name="status" id="status" class="form-control" style="width:120px">
                <option value="">积分类型</option>
                <option value="0">贡献值</option>
                <option value="1">体力</option>
                <option value="2">体力加成</option>
                <option value="3">讯帮步数奖励</option>
            </select>
        </span>
        <span class="frm_input_box search append">
            <a href="javascript:void(0);" id="js_search" class="frm_input_append">
                <i class="icon wb-search" title="搜索"></i>
            </a>
            <input type="text" id="js_keyword" placeholder="请输入用户名" value="" class="frm_input" />
        </span>
    </div>
    <table id="grid-table">
        <thead frozen="true">
        <th data-options="field:'b_username',width:150,align:'center'">用户名</th>
        <th data-options="field:'c_username',width:150,align:'center'">推荐人用户名</th>
        <th data-options="field:'amount',width:100,align:'center'">数量</th>
        </thead>
        <thead>
            <tr>
                <th data-options="field:'status',width:80,align:'center',formatter:formatStatus">类型</th>
                <th data-options="field:'remark',width:300,align:'center'">备注</th>
                <th data-options="field:'create_time',width:160,align:'center'">添加时间</th>
            </tr>
        </thead>
    </table>
</div>

{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/monthPicker/dateRange.js"></script>
<script type="text/javascript" src="__STATIC__/monthPicker/monthPicker.js"></script>
<script type="text/javascript">
    var myDate = new Date();
    var month = parseInt(myDate.getMonth()) + 1;
    var toDay = myDate.getFullYear() + '-' + month + '-' + myDate.getDate();
    var dateRange = new pickerDateRange('month_picker', {
        startDate: '2000-01-01',
        endDate: toDay,
        defaultText: ' 至 ',
        theme: 'ta'
    });
    //状态
    function formatStatus(value,row,index){
        switch (value){
            case 0 :
                var text = '<span style="color:green">贡献值</span>';
                break;
            case 1 :
                var text = '<span style="color:#684aff">体力</span>';
                break;
            case 2 :
                var text = '<span style="color:#684aff">体力加成</span>';
                break;
            default:
                var text = '<span style="color:red">讯帮步数奖励</span>';
        }
        return text;
    }

    $(function () {
        $('#grid-table').datagrid({
            url: getURL('loadList'),
            method: "GET",
            height: getGridHeight(),
            rownumbers: true,
            singleSelect: true,
            remoteSort: false,
            multiSort: true,
            emptyMsg: '<span>无相关数据</span>',
            pagination: true,
            pageSize: 20
        });
        //设置分页控件 
        $('#grid-table').datagrid('getPager').pagination({
            pageSize: 20, //每页显示的记录条数，默认为10 
            pageList: [20, 30, 50]
        });
    });

    $("#js_search").click(function () {
        reload();
    });
    $("#status").change(function () {
        reload();
    });
    function reload()
    {
        var keyword = $("#js_keyword").val();
        var status = $("#status").val();
        var month_picker = $("#month_picker").val();
        var arr = month_picker.split(" 至 ");
        var startDate = arr[0];
        var endDate = arr[1];
        $('#grid-table').datagrid('reload', {keyword: keyword,
            status: status,
            startDate: startDate,
            endDate: endDate});
    }
</script>
{/block}